<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p v-html="title" :id="id"></p>
    <label>{{ number + 1 }}</label>
    <p v-if="test">{{ message.split('').reverse().join('') }}</p>
    <p v-else>这个时候值false</p>
    <p v-n="4"></p>
    <p :class="[a1,a2]">{{money}}:{{a}}/{{b}}</p>
    <p :class="{'text-1': a3}">样式语法测试</p>
    <p :class="obj">style obj</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
    <ul>
      <template v-for="item in list">
        <li :key="item">{{ item }}</li>
      </template>
    </ul>
    to <router-link to="a">a</router-link>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      id: 'text',
      msg: 'Hello Word!',
      title: '<span style="color:red">你好，世界！</span>',
      number: 1,
      test: true,
      message: '测试数据',
      money: 100,
      a: 1,
      a1: 'text-1',
      a2: 'text-2',
      a3: false,
      obj: {
        'text-1': true
      },
      list: ['a', 'b', 'c', 'd']
    }
  },
  computed: {
    b: function () {
      return this.money - this.a
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
